<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="static/css/product.css">
    <script src="static/vue-2.6.10.js"></script>
    <script src="static/axios.min.js"></script>
    <title>我的购物车</title>
</head>
    <style>
        * {

            list-style: none;

            text-decoration: none;
            font-size: 14px;
        }

        .header{
            font-size: 12px;
            border-bottom: 2px solid #ff6700;
            background: #fff;
            color: #b0b0b0;
            position: relative;
            z-index: 20;
            height: 100px;
        }
        .header .container {
            position: relative;
            width: 1226px;
            margin-right: auto;
            margin-left: auto;
        }


        .logo {
            width: 48px;
            height: 48px;
            position: relative;
            display: block;
            width: 55px;
            height: 55px;
            overflow: hidden;
            background-color: #ff6700;
        }
        .header-title {


        }
        .topbar-info {
            margin-top: 30px;
            line-height: 40px;
        }
        .link {
            padding: 0 5px;
            color: #757575;
            text-decoration: none;
        }
        .hid {
            overflow: hidden;
        }
        .left {
            float: left;
        }
        .box_head{
            position: relative;
            margin: 0;
            height: 50px;
            font-size: 30px;
            font-weight: 400;
            color: #757575;
            border-top: 1px solid #e0e0e0;
        }



                .car .subtotal{
            width: 130px;

        }
        .car .ctrl {
            width: 105px;
            padding-right:25px;
            text-align: center;
        }

        .head_row {
            height: 70px;
            line-height: 70px;
        }
        .head_row, .row {
            border-bottom: solid 1px #e0e0e0;
        }
        .row {
            height: 86px;
            line-height:86px;
            padding: 15px 0;
            margin: 0px;
        }
        #sum_area{
            width:1240px;
            height: 60px;
            background: white;
            margin: 20px auto;
        }
        #sum_area #pay{
            width:250px;
            height:60px;
            text-align: center;
            margin-top: 100px;
            margin-left: 1100px;
            line-height: 60px;
            font-size: 19px;
            background: #FF4B00;
            color: white;
        }
        #sum_area #pay_amout{
            width:250px;
            height:60px;
            text-align: center;
            float: right;
            line-height: 60px;
            font-size: 16px;
            color:#FF4B00 ;
        }


        .head_row  img{
            height:25px;
            weight:20px;
        }
        .head_row span{
            font-size:15px;
            float:left;
            margin-left: 0px;
        }



        .jg{
            margin-top: -100px;
            float:right;
        }
        .style_red{
            text-align:center;
        }
        .rg{
            text-align:center;
        }
.checked-icon{
    weight:25px;
    height:30px;
}
        .operation{
            float:right;
        }
        .dd{
            margin-right: 50px;
            float:right;
        }
        .style_red{
            color:red;
        }
        .bottom{
            weight:300px;
            height:180px;
        }

.dadadadada{
    width: 100px;
    height: 100px;
}
    </style>
<body>

<div id="app">

    <div class="header">
        <div >
            <div class="header-title" id="J_miniHeaderTitle">
                <p class="sp1"><h2 id="h4" style="font-size: 30px;"><img src="9c306c0203acb031eb6c262c966f082.png">我的购物车</h2></p>
            </div>
        </div>
    </div>
    <div id="car" class="car">
        <div class="head_row ">
            <img :src="checkedAllImage()" class="checked-icon"  @click="clickedAllImage()">
            <span>全选</span>
        </div>
    </div>
        <div class="bottom" v-for="product in products">
            <img :src="checkedImage(product)" class="checked-icon" @click="clickedImage(product)">
            <img :src="imageUrl(product.picture)" class="dadadadada" alt="">
            <div class="rg"><span>{{product.description}}</span></div>
            <p class="style_red">七天无理由退货</p>
            <span class="jg">
                <ul>
                    <li class="style_red">￥{{product.sell_price}}</li>
                    <li>x{{product.number}}</li>
                    <li>有货</li>
                </ul>
            </span>
            <div class="operation">
                <button @click="addNumber(product)">+</button>
                <button @click="subtractionNumber(product)">-</button>
            </div>
        </div>
        <hr>
        <div class="dd">
            <span>总商品金额：</span>
            <span id="totalPrice"> ￥100</span> <br>
            <span>返现：</span>
            <span id="returnPrice"> -￥0.00</span> <br>
            <span>返运：</span>
            <span id="newPrice"> ￥10.00</span> <br>
            <span>应付金额：</span>
            <span id="new1Price"> ￥100</span> <br>
            <span>寄送到：四川德阳市 收件人：张飞 123456789</span>
        </div>

    <!--提交订单-->

        <div id="sum_area">

            <button id="pay" @click="submitOrder()">提交订单</button>


        </div>
    </div>

<script>

    let vue = new Vue({
        el:'#app',
        data: {
            products: [{
                picture: "1195000845823.jpg",
                isChecked: false,
                number: 1,
                description: "造型美观高雅,设计理念时尚，具有艺术感，是现代家庭时尚的选择",
                sell_price: 100
            },{
                    picture: "1195000845831.jpg",
                    isChecked: false,
                    number: 1,
                    description: "锅身采用优质不锈钢基材，坚固耐用，导热迅速，节能省时",
                    sell_price: 400
            }],
            isAll: false,
            price: 100,
            number: 12
        },
        created(){
            //异部请求
             axios.get("getCar.do").then(function(result){
                 //使用获取到的数据替换商品列表
                 vue.products = result.data
             });
            this.refreshData();
        },
        methods:{
            imageUrl: function(img_name){
                return 'static/img/productImages/'+img_name;
            },
           checkedImage: function(product){
                return 'static/img/'+(product.isChecked?'checked.png':'no-checked.png');
           },
            clickedImage:function(product){
                product.isChecked = !product.isChecked;
                let flag=true;
                for(let i=0;i<this.products.length;i++){
                    if(!this.products[i].isChecked){
                        flag=false;
                    }
                }
                this.isAll=flag;
                this.refreshData();
            },
            checkedAllImage: function(){
                return 'static/img/'+(this.isAll?'checked.png':'no-checked.png');
            },
            clickedAllImage:function(){
                console.log("点击了全选按钮")
               this.isAll = !this.isAll;
                if(this.isAll){
                    for(let i=0;i<this.products.length;i++){
                        product=this.products[i];
                        product.isChecked=true;
                    }
                }else{
                    for(let i=0;i<this.products.length;i++){
                        product=this.products[i];
                        product.isChecked=false;
                }
                    }
                this.refreshData();
            },
            addNumber:function(product){
               product.number +=1;
               this.refreshData()
            },
            subtractionNumber:function(product){
                if(product.number>0){
                    product.number -=1
                }
                this.refreshData()
            },
           refreshData:function(){
                this.number=0;
                this.price=0;
                let returnPrice=0;
                let  shippingPrice=10;
                let payablePrice=0;
                for(let i=0; i<this.products.length;i++){
                   if(this.products[i].isChecked){
                       this.number += this.products[i].number;
                       this.price += this.products[i].sell_price * this.products[i].number;
                   }
                }

               payablePrice = this.price - returnPrice + shippingPrice;

               // 更新页面上的金额显示
               document.getElementById('totalPrice').textContent = '￥' + this.price;
               document.getElementById('returnPrice').textContent = '-￥' + returnPrice;
               document.getElementById('newPrice').textContent = '￥' + shippingPrice;
               document.getElementById('new1Price').textContent = '￥' + payablePrice;

            },
            submitOrder: function() {

                let param = {
                    "total_price": this.price,
                    "shopping_cars": this.products
                }
                axios.post("submitOrder.do", param, {headers: {'Content-Type': 'application/json'}})
                    .then(function (result) {
                        //判断结果中是否有数据
                        if (result.data.length > 0) {
                            //如果添加成功则跳转到首页
                            window.location.href = "index.jsp";

                        } else {
                            //反之则跳转到登录页面
                            window.location.href = "login.jsp";
                        }
                    });
            }
        }
    });

</script>


</body>
</html>
